<template>
  <div class="user-info-page">
    <!-- 骨架屏 -->
    <div v-if="loading" class="skeleton-container">
      <div class="skeleton-info-card">
        <div class="skeleton-card-header"></div>
        <div class="skeleton-form">
          <div class="skeleton-form-row">
            <div class="skeleton-form-item"></div>
            <div class="skeleton-form-item"></div>
          </div>
          <div class="skeleton-form-row">
            <div class="skeleton-form-item"></div>
            <div class="skeleton-form-item"></div>
          </div>
          <div class="skeleton-form-row">
            <div class="skeleton-form-item"></div>
            <div class="skeleton-form-item"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实际内容 -->
    <div v-else class="info-card">
      <div class="card-header">
        <h3>基本信息</h3>
      </div>

      <el-form :model="userDetailForm" label-position="top" class="info-form">
        <div class="form-row">
          <el-form-item label="昵称" class="form-item">
            <span class="form-display">{{
              userDetailForm.nickName || '请填写您的昵称'
            }}</span>
          </el-form-item>

          <el-form-item label="性别" class="form-item">
            <span class="form-display">
              {{
                userDetailForm.sex == null
                  ? '请选择您的性别'
                  : userDetailForm.sex == 1
                    ? '男'
                    : '女'
              }}
            </span>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="学校" class="form-item">
            <span class="form-display">{{
              userDetailForm.schoolName || '请填写您的学校名称'
            }}</span>
          </el-form-item>

          <el-form-item label="专业" class="form-item">
            <span class="form-display">{{
              userDetailForm.majorName || '请填写您的专业名称'
            }}</span>
          </el-form-item>
        </div>

        <div class="form-row">
          <el-form-item label="手机" class="form-item">
            <span class="form-display">{{ userDetailForm.phone || '请填写常用手机号' }}</span>
          </el-form-item>

          <el-form-item label="微信号" class="form-item">
            <span class="form-display">{{ userDetailForm.wechat || '请填写微信号' }}</span>
          </el-form-item>
        </div>

        <el-form-item
          label="个人介绍"
          class="form-item full-width"
          v-if="userDetailForm.introduce"
        >
          <span class="form-display intro">{{ userDetailForm.introduce }}</span>
        </el-form-item>
      </el-form>
    </div>

    <!-- 编辑用户信息抽屉 -->
    <el-drawer
      v-model="editDrawerVisible"
      title="编辑个人信息"
      direction="rtl"
      size="500px"
      :before-close="handleDrawerClose"
    >
      <div class="edit-drawer-content">
        <el-form :model="userDetailForm" label-position="top" class="edit-form">
          <el-form-item label="昵称" class="form-item">
            <el-input
              v-model="userDetailForm.nickName"
              placeholder="请填写您的昵称"
              maxlength="8"
            />
          </el-form-item>

          <el-form-item label="性别" class="form-item">
            <el-radio-group v-model="userDetailForm.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="学校" class="form-item">
            <el-input v-model="userDetailForm.schoolName" placeholder="请填写您的学校名称" />
          </el-form-item>

          <el-form-item label="专业" class="form-item">
            <el-input v-model="userDetailForm.majorName" placeholder="请填写您的专业名称" />
          </el-form-item>

          <el-form-item label="手机" class="form-item">
            <el-input v-model="userDetailForm.phone" placeholder="请填写常用手机号" />
          </el-form-item>

          <el-form-item label="微信号" class="form-item">
            <el-input v-model="userDetailForm.wechat" placeholder="请填写微信号码" />
          </el-form-item>

          <el-form-item label="个人介绍" class="form-item">
            <el-input
              v-model="userDetailForm.introduce"
              type="textarea"
              :rows="4"
              placeholder="请填写个人介绍"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>
        </el-form>

        <div class="drawer-footer">
          <el-button @click="editDrawerVisible = false">取消</el-button>
          <el-button type="primary" @click="editUser">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { getUserDetailService, editUserService } from '@/apis/user'
import { useUserStore } from '@/stores'
import { reactive, ref, onMounted, computed } from 'vue'
import { ZlMessage } from '@/utils/message'

const userStore = useUserStore()

const userDetailForm = reactive({})
const editDrawerVisible = ref(false)
const loading = ref(true)

// 计算个人资料完善度
const profileCompletion = computed(() => {
  let completed = 0
  const fields = ['nickName', 'sex', 'schoolName', 'majorName', 'phone', 'introduce']
  fields.forEach((field) => {
    if (userDetailForm[field]) completed++
  })
  return Math.round((completed / fields.length) * 100)
})

async function getUserDetail() {
  try {
    loading.value = true
    const userRef = await getUserDetailService()
    Object.assign(userDetailForm, userRef.data)
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ZlMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

// 打开编辑抽屉
function openEditDrawer() {
  editDrawerVisible.value = true
}

// 关闭抽屉前的处理
function handleDrawerClose(done) {
  editDrawerVisible.value = false
  done()
}

async function editUser() {
  try {
    await editUserService(userDetailForm)
    await getUserDetail()

    // 更新 store 中的用户信息，这样导航栏会自动更新
    const updatedUserInfo = {
      ...userStore.userInfo,
      nickName: userDetailForm.nickName,
      email: userDetailForm.email,
      phone: userDetailForm.phone
    }
    userStore.setUserInfo(updatedUserInfo)

    // 关闭抽屉
    editDrawerVisible.value = false
    ZlMessage.success('保存成功')
  } catch (error) {
    console.error('保存失败:', error)
    ZlMessage.error('保存失败，请重试')
  }
}

onMounted(() => {
  getUserDetail()
})

// 暴露方法给父组件
defineExpose({
  openEditDrawer,
  profileCompletion,
  userDetailForm
})
</script>

<style lang="scss" scoped>
.user-info-page {
  .info-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .card-header {
      padding: 20px 24px;
      border-bottom: 1px solid #e0e0e0;

      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #222;
        margin: 0;
      }
    }

    .info-form {
      padding: 24px;

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;

        .form-item {
          margin-bottom: 0;

          &.full-width {
            grid-column: 1 / -1;
          }

          .el-form-item__label {
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
          }

          .form-display {
            display: block;
            padding: 12px 16px;
            background: #f8f9fa;
            border-radius: 8px;
            color: #666;
            min-height: 40px;
            line-height: 1.5;

            &.intro {
              white-space: pre-wrap;
              min-height: 80px;
            }
          }
        }
      }
    }
  }
}

/* 编辑抽屉样式 */
.edit-drawer-content {
  padding: 20px;
  position: relative;
  padding-bottom: 80px;

  .edit-form {
    .form-item {
      margin-bottom: 24px;

      .el-form-item__label {
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
        font-size: 14px;
      }

      .el-input,
      .el-textarea {
        .el-input__wrapper,
        .el-textarea__inner {
          border-radius: 8px;
          border: 1px solid #dcdfe6;

          &:hover {
            border-color: #c0c4cc;
          }

          &:focus {
            border-color: #409eff;
          }
        }
      }

      .el-radio-group {
        .el-radio {
          margin-right: 24px;

          .el-radio__label {
            font-size: 14px;
            color: #606266;
          }
        }
      }
    }
  }

  .drawer-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: white;
    border-top: 1px solid #e4e7ed;
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .el-button {
      min-width: 80px;
    }
  }
}

/* 骨架屏样式 */
.skeleton-container {
  .skeleton-info-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .skeleton-card-header {
      width: 120px;
      height: 18px;
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s infinite;
      border-radius: 4px;
      margin: 20px 24px 16px;
    }

    .skeleton-form {
      padding: 0 24px 24px;

      .skeleton-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 20px;

        .skeleton-form-item {
          height: 40px;
          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
          background-size: 200% 100%;
          animation: skeleton-loading 1.5s infinite;
          border-radius: 8px;
        }
      }
    }
  }
}

/* 骨架屏动画 */
@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .user-info-page .info-card .info-form .form-row {
    grid-template-columns: 1fr;
  }
}
</style>

